<script setup>
import { NodeToolbar } from '@vue-flow/node-toolbar';
import { Handle, Position, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue';
import BaseNode from '../../other/base/BaseNode.vue';

const props = defineProps({
  data: { type: Object, required: true },
  selected: { type: Boolean, default: false }
});
</script>

<template>
  <BaseNode >
  <template #content>
    <NodeToolbar v-if="selected" position="top">
      <!-- 工具栏内容 -->
    </NodeToolbar>
    条件判断
    <Handle id="in" type="source" :position="Position.Top" />
    <Handle id="yes" type="target" :position="Position.Left" />
    <Handle id="no" type="target" :position="Position.Right" />
  </template>
  </BaseNode>
</template>

<style scoped>
.handle {
  width: 10px;
  height: 10px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
}

.input {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.output-true {
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
}

.output-false {
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
}
</style>